<template>
    <div id="contianer">
        <div class="screen_model">
            <el-row :gutter="20">
                <el-col prop="name" :span="5">
                    <el-input
                        size="small"
                        v-model="searchForm.name"
                        placeholder="标签名称"
                        clearable
                    ></el-input>
                </el-col>
                <el-col :span="5" prop="fieldId">
                    <el-select
                        size="small"
                        style="width: 100%"
                        v-model="searchForm.fieldId"
                        clearable
                        placeholder="领域标签"
                    >
                    <el-option
                            v-for="item in areaList"
                            :key="item.id"
                            :value="item.id"
                            :label="item.labelName"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="5" prop="userId">
                    <el-select
                        size="small"
                        style="width: 100%"
                        v-model="searchForm.userId"
                        clearable
                        filterable
                        allow-create
                        default-first-option
                        placeholder="创建人员"
                         v-el-select-lazyloading="lazyloading"
                         remote
                         :remote-method="remoteMethod"
                         @focus="searchFocus"
                    >
                    <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :value="item.id"
                            :label="item.userName"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col
                    :span="4"
                    style="display: flex; justify-content: end; float: right"
                >
                    <el-button type="primary" @click="getLabelList()" size="small"
                        >查询</el-button
                    >
                    <el-button @click="resetSearch()" size="small"
                        >重置</el-button
                    >
                </el-col>
            </el-row>
        </div>

        <el-table
            :data="tableData"
            style="width: 100%"
            v-loading="loading"
            row-key="id"
            border
            default-expand-all
            :max-height="tableClientHeight"
            :tree-props="{ children: 'children', hasChildren: '' }"
        >
            <el-table-column prop="labelName" label="标签名称" min-width="20%">
            </el-table-column>
            <!-- <el-table-column prop="labelName" label="岗位标签" min-width="20%">
            </el-table-column>
            <el-table-column prop="labelName" label="标签元素" min-width="20%">
            </el-table-column> -->
            <el-table-column prop="labelType" label="标签类型" min-width="20%">
            </el-table-column>
            <el-table-column prop="creator" label="创建人员" min-width="20%">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" min-width="20%">
            </el-table-column>
            <el-table-column
                align="center"
                header-align="center"
                min-width="25%"
                label="操作"
            >
                <template slot-scope="scope">
                    <!-- <el-link style="display: inline-block;margin-left: 10px;" @click="view(scope.row.id)">查看</el-link> -->
                    <div>
                    <el-link
                        type="danger"
                        style="display: inline-block; margin-left: 10px"
                        v-if="scope.row.subscribe"
                        @click="quitFollow(scope.row.id)"
                        >取消关注</el-link
                    >
                    <el-link
                        type="primary"
                        style="display: inline-block; margin-left: 10px"
                        v-else
                        @click="follow(scope.row.id)"
                        >关注</el-link
                    ></div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="total"
            background
            layout="total, prev, pager, next, jumper"
        >
        </el-pagination>

    </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      elementsVisible: false,
      labelList: [
        {
          label: '领域标签',
          value: 1
        },
        {
          label: '岗位标签',
          value: 2
        },
        {
          label: '标签元素',
          value: 3
        }
      ],
      tableData: [],
      searchForm: {
        name: '',
        userId: '',
        fieldId: '',
        pageNumber:1,
        pageSize:10,
        totalPage:0,
      },
      userForm:{
        name:''
      },
      areaList: [],
      postList: [],
      userList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      ruleForm: {
        labelLevel: '',
        labelName: '',
        area: '',
        post: ''
      },
      rules: {
        labelName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请选择上级领域标签', trigger: 'change' }
        ],
        post: [
          { required: true, message: '请选择上级岗位标签', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    tableClientHeight() {
      let tableClientHeight = document.documentElement.clientHeight || document.body.clientHeight
      tableClientHeight = tableClientHeight - 279
      return tableClientHeight
    }
  },
  mounted() {
    this.getLabelList()
    this.getUserList()
    this.getAreaData()
  },
  methods: {
    view() {},
    del(id) {
      this.$http({
        url: '/knowledgeLabel/delete',
        method: 'post',
        data: {
          id
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.getLabelList()
          this.$message.success('删除成功')
        }
      })
    },
    follow(id) {
      this.$http({
        url: '/knowledgeLabel/subscribe',
        method: 'post',
        data: {
          id
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.getLabelList()
          this.$message.success('关注成功')
        }
      })
    },
    quitFollow(id) {
      this.$http({
        url: '/knowledgeLabel/unsubscribe',
        method: 'post',
        data: {
          id
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.getLabelList()
          this.$message.success('关注成功')
        }
      })
    },
    changeArea() {
      this.ruleForm.post = ''
      this.getPostData()
    },
    changeLabel() {
      this.ruleForm.area = ''
      this.ruleForm.post = ''
    },
    resetSearch() {
      this.searchForm.fieldId = ""
      this.searchForm.name = ""
      this.searchForm.userId = ""
      this.pageNo = 1
      this.pageSize = 10
      this.getLabelList()
    },
    searchFocus(){
      this.userForm.name = ""
      this.searchForm.pageNumber = 1
      this.getUserList();
    },
    remoteMethod(e){
      console.log('eeee',e)
      this.userForm.name = e
      this.searchForm.pageNumber = 1
      this.userList = []
      this.getUserList();
    },
     //下拉框懒加载
     lazyloading() {
    if( this.searchForm.pageNumber > this.searchForm.totalPage){
      return
    }
    this.searchForm.pageNumber++
    this.getUserList()
    },
    getUserList() {
      this.$http({
        url: '/knowledgeLabel/userList',
        method: 'get',
        params: {
          pageSize:this.searchForm.pageSize,
          pageNumber:this.searchForm.pageNumber,
          name:this.userForm.name
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          if(data.data.pageNumber == 1){
            this.userList = data.data.data;
          }else{
            this.userList = this.userList.concat(data.data.data == [] ? [] : data.data.data);
          }
          this.searchForm.pageSize = data.data.pageSize;
          this.searchForm.pageNumber = data.data.pageNumber;
          this.searchForm.totalPage = data.data.totalPage;
        }
      })
    },
    getAreaData() {
      this.$http({
        url: '/knowledgeLabel/field',
        method: 'get',
        params: {}
      }).then(({ data }) => {
        if (data.code == 200) {
          this.areaList = data.data
        }
      })
    },
    getPostData() {
      this.$http({
        url: '/knowledgeLabel/post',
        method: 'get',
        params: {
          name: '',
          parentId: this.ruleForm.area
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.postList = data.data
        }
      })
    },
    getLabelList() {
      this.loading =true
      this.$http({
        // url: '/knowledgeLabel/list',
        url:"/knowledgeLabel/app/list",
        method: 'get',
        params: {
          fieldId: this.searchForm.fieldId,
          name: this.searchForm.name,
          pageNumber: this.pageNo,
          pageSize: this.pageSize,
          userId: this.searchForm.userId
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.loading =false
          this.tableData = data.data.data
          this.total = data.data.totalSize
        }
      })
    },
    elementsVisibleClose() {
      this.elementsVisible = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.init()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.init()
    },
  }
}
</script>
<style lang='scss' scoped>
#contianer {
    width: 98%;
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin: 1%;
    float: left;

    .screen_model {
        margin-bottom: 20px;
    }

    .el-select {
        width: 100%;
    }
}
</style>
